<script src="https://res.dcdev.net/dcdev/v1.0.8/assets/third_part/monaco-editor/vs/loader.js"></script>

<div style="padding: 0;width: 100%;height: 100%" class="dcdev-border" id="dcdev_source_container">
    <div id="json_show" style="width: 100%;height: 100%"> </div>
</div>

<script>
    {
        // 插入内容到当前位置
        function insert_to_editor_show(content) {
            editor_show.focus()
            var selection = editor_show.getSelection()
            var range = new monaco.Range(selection.startLineNumber, selection.startColumn, selection.endLineNumber,
                selection.endColumn)
            var id = {
                major: 1,
                minor: 1
            }
            var op = {
                identifier: id,
                range: range,
                text: content,
                forceMoveMarkers: true
            }
            editor_show.executeEdits('json_show', [op])
        }

        // 获取当前选中内容
        function get_selected_content_show() {
            return editor_show.getModel().getValueInRange(editor_show.getSelection())
        }

        // 替换当前选中内容（没有选中内容则插入到当前位置）
        function replace_selected_content_show(text) {
            let selection = this.editor_show.getSelection()
            let range = new monaco.Range(selection.startLineNumber, selection.startColumn, selection.endLineNumber,
                selection.endColumn)
            let id = {
                major: 1,
                minor: 1
            }
            let op = {
                identifier: id,
                range: range,
                text: text,
                forceMoveMarkers: true
            }
            this.editor_show.executeEdits(this.root, [op])
            this.editor_show.focus()
        }

        // 删除当前选中内容
        function remove_selected_content_show() {
            let selection = this.editor_show.getSelection()
            let range = new monaco.Range(selection.startLineNumber, selection.startColumn, selection.endLineNumber,
                selection.endColumn)
            let id = {
                major: 1,
                minor: 1
            }
            let op = {
                identifier: id,
                range: range,
                text: "",
                forceMoveMarkers: true
            }
            this.editor_show.executeEdits(this.root, [op])
            this.editor_show.focus()
        }
    }

    var update_preview_timeout;
    var editor_show = null;
    require.config({
        paths: {
            'vs': 'https://res.dcdev.net/dcdev/v1.0.8/assets/third_part/monaco-editor/vs'
        },
        'vs/nls': {
            'availableLanguages': {
                '*': 'zh-cn'
            }
        }
    });
    require(['vs/editor/editor.main'], function () {
        //创建编辑器
        editor_show = monaco.editor.create(
            document.getElementById('json_show'), {
                value: [''].join('\n'),
                language: 'html',
                theme: 'vs-dark'
            });
        //监听编辑框内容变化
        editor_show.onDidChangeModelContent((e) => {

        });
    });
</script>